{% extends "base.html" %}
{% load static %}

{% block  title %} vpnmanger| 首页{% endblock %}

{% block page-content %}

<!-- Content Header (Page header) -->

<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>仪表盘</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/dashboard/">Home</a></li>
          <li class="breadcrumb-item active">dashboard</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>



 <!-- Main content section  -->
    <section class="content">
      <div class="container-fluid">


        <!--  row -->
        <div class="row">
          <!-- Left col -->
          <section class="col-lg-12 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->
            <div class="card box">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="fas fa-chart-pie mr-1"></i>
                  系统资源
                </h3>
        
              </div><!-- /.card-header -->


        
            </div>
            <!-- /.row -->
        
        
        
        
          </section>
          <!-- /.Left col -->
        
        </div>
        <!-- /.row  -->

        

        <!-- Small boxes (Stat box) -->
        <div class="row text-center ">
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner">
                <h3>{{　hostcount　}}</h3>

                <p>主机在线</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <a href="{% url 'core:hosts' %}"  class="small-box-footer">More info
<i class="fa fa-arrow-circle-right"></i>
              </a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner">
                <h3>5</h3>
               <h2><s>定时任务</s></h2>
                
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <a href="#" class="small-box-footer">More info 
                <i class="fa fa-arrow-circle-right"></i>
              </a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-warning">
              <div class="inner">
                <h3>10</h3>
                  <h2><s>常用作业数</s></h2>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <a href="#" class="small-box-footer">More info
              <i class="fa fa-arrow-circle-right"></i>
              </a>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
              <div class="inner">
                <h3>2</h3>

                <p>用户数</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <a href="#" class="small-box-footer">More info 
                <i class="fa fa-arrow-circle-right"></i>
              </a>
              
            </div>
          </div>
          <!-- ./col -->
        </div>
        <!-- /.row -->


      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content section -->



{% endblock %}

